Propriétés typographiques

body { font-family: 'Helvetica', Arial, sans-serif; }

Toujours prévoir des polices de repli.

Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet">

body { font-family: 'Roboto', sans-serif; }

Limiter le nombre de polices (performance).

Tailles et interligne

body { font-size: 16px; line-height: 1.6; }
h1   { font-size: 2.5rem; }

• line-height sans unité (1.5–1.6) pour le confort de lecture
• rem pour des tailles cohérentes

Formats de couleur

rgba / hsla : le dernier paramètre est l'opacité (0 à 1).

Dégradés

.box {
    background: linear-gradient(to right, #C1002A, #11304C);
}
.cercle {
    background: radial-gradient(circle, #fff, #11304C);
}

• linear-gradient : dégradé linéaire
• radial-gradient : dégradé circulaire

Ombres

.carte {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
h1 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

box-shadow : décalage X, Y, flou, couleur.

Variables CSS

:root {
    --couleur-principale: #C1002A;
    --espacement: 1rem;
}
.bouton {
    background: var(--couleur-principale);
    padding: var(--espacement);
}

Centralise les valeurs : un seul endroit à modifier.

Organiser son CSS

/* 1. Variables et reset */
/* 2. Styles de base (body, titres) */
/* 3. Mise en page (layout) */
/* 4. Composants */
/* 5. Media queries */

Un fichier ordonné et commenté se maintient bien mieux.

Nommage : la méthode BEM

.card { }              /* Block */
.card__title { }       /* Element */
.card--featured { }    /* Modifier */

Block Element Modifier : des noms de classes prévisibles et lisibles.

Accessibilité : le contraste

• Contraste texte/fond suffisant (ratio ≥ 4.5:1 pour le texte courant)
• Ne pas transmettre l'information uniquement par la couleur
• Vérifier au clavier (:focus visible)

Outils : contrast checker, Lighthouse.

Valider et tester

Valider tôt et souvent évite les surprises.